<template>
	<view class='records'>
		<Header headerTitle='设备消费记录'></Header>
		<view class="records-content" v-for="(item,index) in RecordsList"
				:key="index">
			<view class="records-items">
				<view class="">订单号：</view>
				<view class="">{{item.order_id}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">用户id：</view>
				<view class="">{{item.user_id}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">设备名：</view>
				<view class="">{{item.device_name}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">门店：</view>
				<view class="">{{item.store_location}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">订单创建时间：</view>
				<view class="">{{item.create_time}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">订单开始时间：</view>
				<view class="">{{item.start_time}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">订单结束时间：</view>
				<view class="">{{item.end_time}}</view>
			</view>
			<view class='line'></view>
			<view class="records-items">
				<view class="">订单时长：</view>
				<view class="">{{item.order_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/common/Header.vue'
	import request from "../../api/request";
	export default {
		components: {
			Header
		},
		data() {
			return {
				RecordsList: [],
				token:'',
				total:null, //总共多少条数据
				formData:{
					pageSize:5,  //每页5条数据
					page:1,       //第几页
				}
			}
		},
		onLoad(option) {
			
			this.token = uni.getStorageSync('token');
			this.getRecordsList()
			//页面加载执行
			
		},
		onReachBottom(){
			let  allTotal = this.formData.page * this.formData.pageSize
				if(allTotal < this.total){
					//当前条数小于总条数 则增加请求页数
					this.formData.page ++;
					this.getRecordsList() //调用加载数据方法
				}else{
					// console.log('已加载全部数据')
				}
		},
		onPullDownRefresh () {
		    this.RecordsList = []
			this.formData.page = 1;
		    //调用获取数据方法
		    this.getRecordsList()
		    setTimeout(() => {
		        //结束下拉刷新
		      uni.stopPullDownRefresh ();
		    }, 1000);
		},
		methods: {
			getRecordsList() {
				
				request({
					url: '/kx/device/records',
					data:{
						token:this.token,
						page:this.formData.page
					},
					successCb: (res) => {
						this.total = res.data.total;
						const newlist = res.data.data;
						this.RecordsList.push(...newlist);
					},
				});
			},
			
		}
	}
</script>

<style>
page {
		background-color: #f6f6f6;
	}
.records-content {
  background-color: #fff;
  border-radius: 10rpx;
  border: 3rpx solid #ffff;
  margin: 20rpx;
}
.records-items {
  margin:20rpx;
  display: flex;
  justify-content: space-between;
}
.line{
	width:100%;
	height:2rpx;
	background-color: #E1E1E1;
}
</style>
